---
title: Scroll Area
description: Augments native scroll functionality for custom, cross-browser styling.
shadcnDocsLink: https://ui.shadcn.com/docs/components/scroll-area
---

<ComponentPreview component="scroll-area">
  ```tsx file=<rootDir>/src/examples/ui/scroll-area.tsx
  ```
</ComponentPreview>

## Installation

<Installation component="scroll-area">
  ```tsx file=<rootDir>/src/components/ui/scroll-area.tsx
  ```
</Installation>

## Usage

```ts
import { ScrollArea } from '@/components/ui/scroll-area'
```

```tsx
<ScrollArea className="rounded-base h-[200px] w-[350px] text-main-foreground border-2 border-border bg-main p-4 shadow-shadow">
  Jokester began sneaking into the castle in the middle of the night and
  leaving jokes all over the place: under the king&apos;s pillow, in his
  soup, even in the royal toilet. The king was furious, but he couldn&apos;t
  seem to stop Jokester. And then, one day, the people of the kingdom
  discovered that the jokes left by Jokester were so funny that they
  couldn&apos;t help but laugh. And once they started laughing, they
  couldn&apos;t stop.
</ScrollArea>
```